<template>
  <span class="span_item">
    <span @click="Expanded">
      <el-input style="width: 150px; height: 20px" v-model="node.name" size="small" v-if="node.dep === '4'"
                maxlength="14"></el-input>
      <span v-if="node.dep !== '4'" style="font-size: 14px">{{node.name}}</span>
    </span>
    <span v-if="node.dep === '4'">
      <span @click="SaveEdit" size="small">
        <img :src="treeSure" style="vertical-align: middle"/>
      </span>
      <!--<span @click="CancelEdit" size="small">-->
        <!--<img :src="treeCancel" style="vertical-align: middle"/>-->
      <!--</span>-->
    </span>
    <span class="span_icon">
       <span v-if="node.dep === '2'" style="margin-left: 0px" color="gray" type="edit" size="16" @click="OpenEdit">
         <img :src="treeUpdatenormal" style="vertical-align: middle"/>
       </span>
       <span v-if="node.dep === '2'" style="margin-left: 0px" type="plus-round" color="red" size="16"
             @click="showAddEquip(node)">
         <img :src="treeAddnormal" style="vertical-align: middle"/>
       </span>
       <span v-if="node.dep === '1'" style="margin-left: 0px" type="plus-round" color="red" size="16" @click="Append">
         <img :src="treeAddnormal" style="vertical-align: middle"/>
       </span>
       <span v-if="node.dep === '2'" style="margin-left: 0px" type="ios-trash" color="red" size="18" @click="Delete">
         <img :src="treeDeletenormal" style="vertical-align: middle"/>
       </span>
    </span>
     <add-equip-dialog v-if="addEquipFalse" @giveFalse="addDialogReturn" :propsgid='projectGid' v-on:rerule = "reruleStaus"></add-equip-dialog>
  </span>
</template>
<script>
  import treeDeletenormal from '@/assets/components/treeDeletenormal.png'
  import treeUpdatenormal from '@/assets/components/treeUpdatenormal.png'
  import treeAddnormal from '@/assets/components/treeAddnormal.png'
  import treeCancel from '@/assets/components/treeCancel.png'
  import treeSure from '@/assets/components/treeSure.png'
  import addEquipDialog from './addEquipDialog'

  export default {
    components: {
      addEquipDialog
    },
    data() {
      return {
        addEquipFalse: false,
        treeDeletenormal,
        treeUpdatenormal,
        treeAddnormal,
        treeCancel,
        treeSure,
        node: this.value,
        projectGid: '',
        nodeData: JSON.parse(JSON.stringify(this.value))
      }
    },
    props: {
      value: {
        default: function() {
          return {}
        }
      },
      treeNode: {
        default: function() {
          return {}
        }
      }
    },
    mounted() {
      console.log(this.node)
    },
    methods: {
      reruleStaus: function(dialogStatus) {
        this.restars = dialogStatus
        this.SaveEdit()
      },
      showAddEquip(val) {
        this.projectGid = val.name
        this.addEquipFalse = !this.addEquipFalse
      },
      // 添加设备
      addDialogReturn(data) {
        this.addEquipFalse = data
      },
      OpenEdit() {
        this.node.dep = '4'
        this.node.isAdd = false
      },
      Append() {
        // 添加节点事件
        this.$emit('Append')
      },
      SaveEdit() {
        // 保存节点事件
        this.node.dep = '2'
        this.$emit('SaveEdit', this.nodeData)
      },
      CancelEdit() {
        this.node.dep = '2'
        this.$emit('CancelEdit', this.nodeData)
      },
      Delete() {
        this.$emit('Delete', this.nodeData)
      },
      Expanded() {
        this.treeNode.expanded = !this.treeNode.expanded
      }
    },
    watch: {
      value: {
        handler: function(val, oldVal) {
          this.node = val
        },
        deep: true
      },
      node: {
        handler: function(val) {
          this.$emit('input', val)
        },
        deep: true
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-button--small {
    padding: 1px 4px;
    font-size: 12px;
    border-radius: 3px;
  }

  /deep/ .el-input--small .el-input__inner {
    height: 23px;
    line-height: 18px;
  }

  .span_item:hover .span_icon {
    display: inline;
  }

  .span_icon {
    margin-left: 10px;
    display: none;
  }
</style>
